<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="租房" :border="false" :fixed="true" bg="bg-fff" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="w100 bg-f7f7f7" style="height: 10rpx;"></view>
		<view class="bg-fff padding-x-24 ">
			<view class="flex align-center padding-top-20 margin-bottom-20"><view class="bg-zhuse" style="width: 6rpx;height: 30rpx;"></view><text class="fs-30 color-333 margin-left-16">房屋信息</text></view>
			<view class="padding-y-30 solid-bottom flex align-center justify-between">
				<view class="fs-28 color-333">标题 <text class="color-zhuse">*</text></view>
				<input v-model="subInfo.title"  type="text" class="fs-26 color-aaa text-right flex1" placeholder="请填写">
			</view>
			<view @tap="selarea()" class="padding-y-30 solid-bottom flex align-center justify-between">
				<view class="fs-28 color-333">小区地址 <text class="color-zhuse">*</text></view>
				<input v-model="area" disabled type="text" class="fs-26 color-aaa text-right flex1" placeholder="请选择">
			</view>
			<view  class="padding-y-30 solid-bottom flex align-center justify-between">
				<view class="fs-28 color-333">小区名称 <text class="color-zhuse">*</text></view>
				<input v-model="subInfo.address"  type="text" class="fs-26 color-aaa text-right flex1" placeholder="请填写">
			</view>
			<view class="padding-y-30 solid-bottom flex align-center justify-between">
				<view class="fs-28 color-333">面积 <text class="color-zhuse">*</text></view>
				<input v-model="subInfo.area" type="text" class="fs-26 color-aaa text-right flex1" placeholder="请填写">
			</view>
			<view class="padding-y-30 solid-bottom flex align-center justify-between">
				<view class="fs-28 color-333">户型|卧室类型|卧室朝向 <text class="color-zhuse">*</text></view>
				<input  v-model="subInfo.flat" type="text" class="fs-26 color-aaa text-right flex1" placeholder="请填写">
			</view>
			<view class="padding-y-30 solid-bottom flex align-center justify-between">
				<view class="fs-28 color-333">楼层<text class="color-zhuse">*</text></view>
				<input v-model="subInfo.floor" type="text" class="fs-26 color-aaa text-right flex1" placeholder="请填写">
			</view>
			<view class="padding-y-30 solid-bottom flex align-center justify-between">
				<view class="fs-28 color-333">总楼层<text class="color-zhuse">*</text></view>
				<input v-model="subInfo.total_floors" type="text" class="fs-26 color-aaa text-right flex1" placeholder="请填写">
			</view>
			<view class="padding-y-30 solid-bottom flex align-center justify-between">
				<view class="fs-28 color-333">租金<text class="color-zhuse">*</text></view>
				<input v-model="subInfo.price" type="text" class="fs-26 color-aaa text-right flex1" placeholder="请填写">
			</view>
			<view class="padding-y-30 solid-bottom flex align-center justify-between">
				<view class="fs-28 color-333">时间<text class="color-zhuse">*</text></view>
				<input v-model="subInfo.time_num" type="text" class="fs-26 color-aaa text-right flex1" placeholder="请填写">
				<picker :value="index" :range="timeArr" @change="bindPickerChange">
					<view class="flex align-center fs-26 color-666 margin-left-20">
						<text>{{timeArr[index]}}</text>
						<image src="../../static/img/down.png" style="width: 34rpx;height: 34rpx;"></image>
					</view>
				</picker>
			</view>
			<view class="padding-y-30 solid-bottom flex align-center justify-between">
				<view class="fs-28 color-333">联系电话<text class="color-zhuse">*</text></view>
				<input v-model="subInfo.mobile" type="text" class="fs-26 color-aaa text-right flex1" placeholder="请填写">
			</view>
		</view>
		<view class="w100 bg-f7f7f7" style="height: 10rpx;"></view>
		<view class="bg-fff padding-x-24 ">
			<view class="flex align-center padding-y-20 solid-bottom"><view class="bg-zhuse" style="width: 6rpx;height: 30rpx;"></view><text class="fs-30 color-333 margin-left-16">图片</text></view>
			<view class="flex align-center justify-center  padding-y-40">
				<view>
					<image style="width: 160rpx;height: 160rpx;margin-right: 40rpx;"  v-for="(item,index) in  images" :key='index' :src="item"></image>
				</view>
				<view  @tap="uploadImg()" >
					<image style="width: 110rpx;height: 110rpx;" src="../../static/img/add_icon.png"></image>
					<view class="fs-28 color-999 margin-top-16">添加图片</view>
				</view>
			</view>
		</view>
		<!-- <view class="w100 bg-f7f7f7" style="height: 10rpx;"></view>
		<view class="bg-fff padding-x-24 ">
			<view class="flex align-center padding-top-20"><text class="fs-30 color-333">房源详情</text></view>
			<view class="flex align-center  padding-y-40">
				<view class="fs-22 color-333 bg-f7f7f7 margin-right-24 radius60" style="padding: 16rpx 40rpx;">房源详情</view>
				<view class="fs-22 color-333 bg-f7f7f7 margin-right-24 radius60" style="padding: 16rpx 40rpx;">房源详情</view>
				<view class="fs-22 color-333 bg-f7f7f7 margin-right-24 radius60" style="padding: 16rpx 40rpx;">房源详情</view>
			</view>
		</view> -->
		<view class="w100 bg-f7f7f7" style="height: 10rpx;"></view>
		<view class="bg-fff padding-x-24 ">
			<view class="flex align-center padding-top-20"><text class="fs-30 color-333">房源描述</text></view>
			<view class="padding-y-40">
				<textarea v-model="subInfo.describe" class="fs-20 color-666 w100" placeholder="多角度补充信息，更快给合适的租客" />
			</view>
		</view>
		<view v-if="!subInfo.id" class="padding-x-60 margin-y-60 padding-bottom-30">
			<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">发布</view>
		</view>
		<view v-if="subInfo.id" class="padding-x-60 margin-y-60 padding-bottom-30">
			<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">修改</view>
		</view>
		
		<uni-popup ref="area" type="bottom">
			<view class="area_wrap bg-fff padding-40 radius-top30 relative">
				<image class="area_close" src="../../static/img/close_icon.png" mode="aspectFit" @tap="close()"></image>
				<view class="fs-32 fw-bold text-center">请选择地区</view>
				<view class="flex align-center padding-y-30">
					<text class="area_sel text-cut padding-x-16" v-for="(item, index) in arr" :key="index" @tap="selText(item, index)">{{item.label}}</text>
					<text class="area_sel color-zhuse" v-if="hasMore">请选择</text>
				</view>
				<scroll-view scroll-y class="area_box padding-y-40">
					<view class="fs-28 color-333 padding-y-16 text-cut" :class="{'fw-bolder color-zhuse':current == index }" v-for="(item, index) in list" :key="item.value" @tap="toggle(item, index)">
						<image v-if="current == index" class="duihao" src="../../static/img/duihao.png" mode="aspectFit"></image>
						{{item.label}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subInfo:{
					category_id:'',
					title:"",
					region:"",
					address:"",
					area:"",
					floor:"",
					total_floors:"",
					price:"",
					time:1,
					time_num:"",
					images:[],
					describe:"",
					mobile:"",
					flat:"",
				},
				images:[],
				timeArr:['天','周','月','年'],
				index:0,
				
				list:[],
				arr:[],
				current:-1,
				textCurrent:0,
				area:'',
				hasMore:true
			}
		},
		onLoad(opt) {
			if(opt.id){
				this.subInfo.id  =  opt.id;
				this.getInfo()
			}
			this.subInfo.category_id = opt.cate_id;
			this.init()
		},
		methods:{
			getInfo(){
				var that = this;
				this.$api.house_detail({house_id:this.subInfo.id}).then(res=>{
					if(res.code == 1){
						if(res.data){
							this.subInfo.category_id = res.data.category_id;
							this.subInfo.title = res.data.title;
							this.subInfo.region = res.data.region;
							this.subInfo.address = res.data.address;
							this.subInfo.area = res.data.area;
							this.subInfo.floor = res.data.floor;
							this.subInfo.total_floors = res.data.total_floors;
							this.subInfo.price = res.data.price;
							this.subInfo.time_num = res.data.time_num;
							this.subInfo.time = res.data.time;
							this.subInfo.images = res.data.images;
							this.subInfo.describe = res.data.describe;
							this.subInfo.mobile = res.data.mobile;
							this.subInfo.flat = res.data.flat;
							this.area =  this.$tool.remove(res.data.addresses.name);;
							this.images = res.data.images_do;
							this.index = res.data.time-1;
						}
					}
				})
			},
			
			
			uploadImg(type){
				var that = this;
				this.$tool.upload().then(res=>{
					console.log(res)
					that.images.push(res.showImg);
					that.subInfo.images.push(res.id);
				})
			},
			
			submit(){
				if(this.arr.length){
					this.subInfo.region = this.arr[this.arr.length - 1].value;
				}
				if(typeof this.subInfo.images == 'object'){
					this.subInfo.images = this.subInfo.images.join(',');
				}
				this.$api.publish_house(this.subInfo).then(res=>{
					this.$msg(res.msg)
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack()
						},400)
					}
				})
			},
			
			bindPickerChange(e){
				this.index = e.detail.value;
				this.subInfo.time = this.index+1
			},
			reset(){
				this.list = [];
				this.arr = [];
				this.current = -1;
				this.textCurrent = 0;
				this.area = '';
				this.init();
			},
			init(region){
				var data = {
					region: region || ''
				}
				this.$api.getRegion(data).then(res => {
					if(res.code == 1){
						this.list = res.data;
						if(this.list.length > 0){
							this.list.forEach((m,i)=>{
								if(this.arr[this.textCurrent] && m.value == this.arr[this.textCurrent].value){
									this.current = i;
								}
							})
						}
					}else{
						if(res.data.length == 0){
							console.log("----")
							this.hasMore = false
							this.area = '';
							this.arr.forEach((item, index)=>{
								this.area += item.label;
							})
							this.$refs.area.close();
						}else{
							console.log("=====")
							this.hasMore = true
						}
					}
				});
			},
			toggle(item, index){
				this.current = index;
				this.init(item.value);
				this.arr[this.textCurrent] = item;
				if(this.textCurrent+1 < this.arr.length){
					this.arr = this.arr.slice(0, this.textCurrent+1)
				}
				/* if(this.arr.length == 3){
					this.area = this.arr[0].label+this.arr[1].label+this.arr[2].label;
					this.$refs.area.close();
				} */
				this.textCurrent++;
				this.current = -1;
			},
			selarea(){
				this.$refs.area.open();
				/* if(this.arr.length == 3){
					this.textCurrent = 2;
					this.init(this.arr[1].value);
				}else{
					this.reset();
				} */
				if(!this.hasMore){
					if(this.arr.length == 1){
						this.textCurrent = this.arr.length - 1;
						this.init();
					}
					if(this.arr.length > 1){
						this.textCurrent = this.arr.length - 1;
						this.init(this.arr[this.arr.length - 2].value || '');
					}
					if(this.arr.length == 0){
						this.reset();
					}
				}
			},
			selText(item, index){
				this.textCurrent = index;
				if(index == 0){
					this.init();
				}else{
					this.init(this.arr[index-1].value);
				}
			},
			close(){
				if(this.arr.length < 3){
					this.reset();
				}
				this.$refs.area.close();
			},
		}
	}
</script>

<style>
	page{background: #F7F7F7;}
</style>
<style lang="scss" scoped>
	.callBtn{
		width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 10rpx; background: linear-gradient(to bottom,#FDA730,#FE810A);
	}
</style>
